<!-- 电台组件 -->
<template>
  <div class="broadcast">
    <div class="broadcast-inner">
      <div class="jump">
        <ul>
          <li>
            <a
              href="javaScripte:;"
              :class="[{ active: isGreen === 'hot' }]"
              @click="clickHotBroadcast('hot')"
              >热门</a
            >
          </li>
          <li v-for="item in category" :key="item.cateId">
            <a
              href="javaScript:;"
              :class="[{ active: isGreen === item.cateId }]"
              @click="getCategoryBroadcast(item.cateId)"
              >{{ item.cateName }}</a
            >
          </li>
        </ul>
      </div>
      <div
        :class="[
          { 'hot-broadcast': true },
          { clearfix: true },
          { show: isShow },
        ]"
      >
        <ul>
          <li
            v-for="item in hotBroadList"
            :key="item.cateId"
            href="javaScript:;"
          >
            <div class="imgbox">
              <div class="mask">
                <img
                  src="https://y.gtimg.cn/mediastyle/yqq/img/cover_play@2x.png?max_age=2592000&v=88abebcbc1242dbbbbc836cc3e04a006&v=88abebcbc1242dbbbbc836cc3e04a006&v=10e4305a2558d496548955434eaa30d9"
                  alt=""
                />
              </div>
              <img v-lazy="item.dj.backgroundUrl" alt="" />
            </div>
            <a class="sort">{{ item.category }}</a>
            <span class="play-count"
              >播放量 {{ (item.playCount / 10000).toFixed(1) }}万</span
            >
          </li>
        </ul>
      </div>
      <div
        :class="[
          { 'category-broadcast': true },
          { clearfix: true },
          { show: !isShow },
        ]"
      >
        <ul>
          <li href="javaScript:;" v-for="i in categoryList" :key="i.id">
            <div class="imgbox">
              <div class="mask">
                <img
                  src="https://y.gtimg.cn/mediastyle/yqq/img/cover_play@2x.png?max_age=2592000&v=88abebcbc1242dbbbbc836cc3e04a006&v=88abebcbc1242dbbbbc836cc3e04a006&v=10e4305a2558d496548955434eaa30d9"
                  alt=""
                />
              </div>
              <img v-lazy="i.picUrl" />
            </div>
            <div class="text">
              <a class="sort">{{ i.name }} </a>
              <span class="lastprogramname">{{ i.lastProgramName }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据s
    return {
      isShow: false,
      isGreen: "hot",
      hotBroadList: [], // 热门电台
      category: [], // 电台类别的id和name
      categoryList: [], // 电台类别
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 发送类别电台请求
    getCategoryBroadcast: async function (id) {
      let res3 = await this.$http.request("/dj/radio/hot", {
        params: {
          cateId: id,
        },
      });
      this.categoryList = res3.data.djRadios;
      this.isGreen = id;
      this.isShow = true;
    },
    clickHotBroadcast: function (hot) {
      this.sisGreen = hot;
      this.isShow = false;
    },
    // 发送热门电台请求
    getHotBroadcast: async function (limit) {
      let res = await this.$http.post("/dj/hot", {
        params: {
          limit: limit,
        },
      });
      this.hotBroadList = res.data.djRadios;

      // 发送类特别推荐电台请求
      let res2 = await this.$http.request("/dj/category/recommend", {});
      let categoryList = res2.data.data;
      this.category = categoryList.map((item) => {
        return {
          cateId: item.categoryId,
          cateName: item.categoryName,
        };
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getHotBroadcast();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size: 0;
}
.broadcast {
  background: #f5f5f5;
  .broadcast-inner {
    width: 1020px;
    padding: 80px 0;
    position: relative;
    margin: 0 auto;
    .jump {
      position: absolute;
      width: 1000px;
      top: 0;
      left: 0;
      ul {
        display: flex;
        justify-content: space-between;
        text-align: center;
        li {
          float: left;
          a {
            color: #999;
            line-height: 80px;
          }
          a:hover {
            color: #31c27c;
          }
          .active {
            color: #31c27c;
          }
        }
      }
    }
    .show {
      display: none;
    }
    .hot-broadcast,
    .category-broadcast {
      padding: 20px 0;
      ul {
        li {
          box-sizing: border-box;
          padding: 0 10px;
          padding-bottom: 20px;
          list-style: none;
          float: left;
          width: 200px;
          .imgbox {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            .mask {
              width: 200px;
              height: 200px;
              opacity: 0;
              position: absolute;
              transition: all 0.5s linear;
              background: rgba(30, 30, 30, 0.2);
              img {
                position: absolute;
                top: 60px;
                left: 60px;
                width: 80px;
                height: 80px;
              }
            }
            img {
              width: 200px;
              height: 200px;
              transition: all 0.5s linear;
            }
          }
          .imgbox:hover {
            .mask {
              opacity: 1;
              z-index: 999;
            }
            img {
              transform: scale(1.1);
            }
          }
          .text {
            height: 80px;
            .sort {
              cursor: pointer;
              display: block;
              padding-top: 10px;
            }
            .sort:hover {
              color: #31c27c;
            }
            .lastprogramname {
              color: #999;
              font-size: 13px;
            }
          }
          .sort {
            cursor: pointer;
            display: block;
            padding-top: 10px;
          }
          .sort:hover {
            color: #31c27c;
          }
          .play-count {
            color: #999;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>